<template>
    <!-- 关注公众号弹窗 -->
    <div>
        <div v-show="overlayShow" class="att-wechat">
            <div class="wechat-qrcode-bottom">关注"工品业务"微信公众号</div>
            <div class="wechat-qrcode-bottom">即可开通"微信通知功能"</div>
            <!-- <img src="https://www.mrobiji.com/images/weCharQrCode.jpg" loading="lazy"> -->
            <image-vant id="wechat-qrcode-img" :src="qrCodeImg" />
            <div class="qrcode-explain">工品业务</div>
            <div class="qrcode-explain">识别图中二维码</div>
        </div>
        <van-overlay :show="overlayShow" @click="hideOverlay" />
    </div>
</template>

<script>
// 自定义组件
import ImageVant from '_components/project/common/ImageVant'

// UI组件
import { Overlay } from "vant"

// 自定义方法
import { getProImg } from "_projectFn/images"

// 本地图片
import weCharQrCodeProduct from '_assets/img/weCharQrCode.jpg'
import weCharQrCodeTest from '_assets/img/qrcode_for_test.jpg'

import Vue from "vue"
Vue.use(Overlay)

export default {
    name: 'AttWechat',
    data() {
        return {
            qrCodeImg: process.env.BASE_URL.includes('mrobiji') ? getProImg('weCharQrCode.jpg', weCharQrCodeProduct) : getProImg('qrcode_for_test.jpg', weCharQrCodeTest),
            overlayShow: false,
        }
    },
    methods: {
        hideOverlay() {
            this.overlayShow = false
        },
        showOverlay() {
            this.overlayShow = true
        }
    },
    deactivated() {
        this.hideOverlay()
    },
    components: {
        ImageVant,
    },
}
</script>

<style lang="scss" scoped>
.att-wechat {
    height: 340px;
    width: 250px;
    position: fixed;
    background: white;
    top: 50%;
    left: 50%;
    margin-top: -170px;
    margin-left: -125px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .wechat-qrcode-bottom {
        color: #333333;
        font-weight: bold;
    }

    #wechat-qrcode-img {
        width: 136px;
        height: 136px;
    }

    .qrcode-explain {
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        color: #999999;
    }
}
</style>